<template>
	<view>
		<uni-forms
			ref="dilForm"
			v-on="$listeners"
			v-bind="$attrs"
			:model="value"
			:label-position="labelPosition"
			:err-show-type="errShowType"
			:border="border"
			:label-width="labelWidth"
			:labelAlign="labelAlign"
			:validateTrigger="validateTrigger"
		>
			<form-item
				v-for="item in formList"
				:key="item.id"
				:item="item"
				:formValue="value"
				v-model="value[item.prop]"
				@autoChange="autoChange"
				@selectFile="selectFile"
				@deleteFile="deleteFile"
				@onblur="onblur"
				v-show="item.type != 'custom'"
			></form-item>
		</uni-forms>
	</view>
</template>
<script>
import FormItem from './form-item.vue';
import { getAppFormData } from './common';
import { getAddress } from '../../utils/utils';
export default {
	name: 'dil-Form',
	components: {
		FormItem
	},
	model: {
		event: 'change',
		prop: 'value'
	},
	data() {
		return {
			rules: {},
			formList: []
		};
	},
	props: {
		// 用户输入的值
		value: {
			default() {
				return {};
			}
		},
		formId: {
			default: '',
			required: true
		},
		labelPosition: {
			default: 'top'
		},
		//label宽度
		labelWidth: {
			default: '90px'
		},
		//是否显示分隔线
		border: {
			default: false
		},
		//label 居中方式
		labelAlign: {
			//left/center/right
			default: 'left'
		},
		//表单信息错误提示方式
		errShowType: {
			//undertext/toast/modal
			default: 'undertext'
		},
		validateTrigger: {
			// bind/submit/blur
			default: 'blur'
		}
	},
	methods: {
		onblur(name) {
			let that = this;
			that.$refs.dilForm
				.validateField([name])
				.then((res) => {
					console.log(res, 'res');
					// 成功返回，res 为对应表单数据
					// 其他逻辑处理
					// ...
				})
				.catch((err) => {
					console.log(err, 'err');
					// 表单校验验失败，err 为具体错误信息
					// 其他逻辑处理
					// ...
				});
		},
		change(item) {
			console.log(item, 'item');
			this.$emit('change', { ...this.value, ...item });
		},
		autoChange(item) {
			delete item.prop;
			delete item.key;
			delete item.id;
			delete item.formId;
			delete item.value;
			delete item.label;
			delete item.text;
			delete item.list;
			let map = JSON.parse(JSON.stringify(item));
			this.change(item);
		},
		selectFile(item) {
			// let key = Object.keys(item)[0];
			// let fileList = item[key];
			// if (this.value[key] && this.value[key].length > 0) {
			// 	fileList = [...fileList, ...this.value[key]];
			// }
			// let map = {};
			// map[key] = fileList;
			// if (typeof map.fileNames != 'undefined') {
			// 	map.fileTypes = [...map.fileTypes, item.fileType];
			// 	map.fileNames = [...map.fileNames, item.fileName];
			// 	map.fileUuids = [...map.fileUuids, item.fileUuid];
			// } else {
			// 	map.fileTypes = [item.fileType];
			// 	map.fileNames = [item.fileName];
			// 	map.fileUuids = [item.fileUuid];
			// }
			// console.log(map, 'map');
			// this.change(map);
		},
		deleteFile(item) {
			// let key = Object.keys(item)[0];
			// let path = item[key]['path'];
			// let fileList = [];
			// fileList = this.value[key].filter((e) => {
			// 	return e != path;
			// });
			// let map = {};
			// map[key] = fileList;
			// this.change(map);
		},
		validateForm(callback) {
			this.$refs['dilForm']
				.validate()
				.then((res) => {
					console.log(res, 'res');
					callback &&
						callback.call(undefined, {
							flag: true
						});
				})
				.catch((err) => {
					console.log('err: ', err);
					callback &&
						callback.call(undefined, {
							flag: false
						});
				});
		}
	},
	created() {
		getAppFormData(this.formId, (data) => {
			this.formList = data.formList;
			console.log(this.formList, 'this.formList');
			this.rules = data.rulesJson;
			this.$refs.dilForm.setRules(this.rules);
		});
		getAddress({ loading: false }, (data) => {
			uni.setStorageSync('userAddressInfo', data.address);
		});
	},
	watch: {
		value: {
			deep: true,
			handler(val) {}
		},
		'value.supplierCompanyId': {
			handler(newVal, oldVal) {},
			deep: true
		}
	}
};
</script>

<style></style>
